<%--
  Created by IntelliJ IDEA.
  User: LQ
  Date: 2023/9/11
  Time: 11:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <jsp:include page="../Header.jsp"/>
    <title>用户管理</title>
    <style>
        .leftTitle {
            height: 41px;
            line-height: 41px;
            background-color: #f2f2f2;
            margin-top: 0px;
        }
    </style>
</head>

<body class="gray-bg">
<input type="hidden" id="HiddataIds" value="">
<input type="hidden" id="queryJobCode" value="">
<div class="wrapper wrapper-content animated fadeInRight">
    <!-- Panel Style -->
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="btn-group " style="width: 100%" id="toolbar">
                <div class="col-sm-4">
                    <div class="form-group form-search">
                        <label class="col-sm-3 control-label">姓名：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="querySeachName" name="querySeachName"
                                   placeholder="请输入姓名">
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="form-group form-search">
                        <label class="col-sm-3 control-label">职务名称：</label>
                        <div class="col-sm-8">
                            <div class="treeSelect" id="query-tree" style="width: 100%;"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <button type="button" class="btn btn-info" id="bt-serach" onclick="table.queryData('users')">
                        <i class="fa fa-search"></i>&nbsp;查询
                    </button>
                    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modal-definedList"
                            name="customs">
                        <i class="fa fa-plus"></i>&nbsp;自定义表单
                    </button>
                    <button type="button" class="btn btn-success" onclick="com.clearFormItem()"
                            data-toggle="modal" data-target="#modal-form" name="add">
                        <i class="fa fa-plus"></i>&nbsp;新增
                    </button>
                    <button type="button" class="btn btn-danger" id="bt-del" disabled
                            onclick="com.deleteAllMessage('users')" name="delete">
                        <i class="fa fa-trash"></i>&nbsp;批量删除
                    </button>
                    <button type="button" class="btn btn-danger"  onclick="com.clearSearch()">
                        <i class="fa fa-refresh"></i>&nbsp;重置
                    </button>

                </div>
            </div>
            <div class="row">
                <div class="col-sm-3" style="padding-right: 0px">
                    <h3 class="leftTitle" style="margin-top: 0px"><span style="margin-left: 10px">部门列表</span></h3>
                    <div id="div-tree"></div>
                </div>
                <div class="col-sm-9" style=" padding-left: 0px">
                    <table id="table-data"></table>
                </div>
            </div>
        </div>
    </div>
    <!-- End Panel Style -->
</div>

<input type="hidden" id="Hiddeptcode" name="Hiddeptcode" value="">
<input type="hidden" id="Hiddeptname" name="Hiddeptname" value="">
<%--用户信息--%>
<div class="modal inmodal" data-backdrop="static" id="modal-form" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-body">
                <div class="row">
                    <h3>用户信息</h3>
                    <form class="form-horizontal m-t" id="myForm">
                        <input type="hidden" id="userid" name="userid" value="">
                        <input type="hidden" id="deptcode" name="deptcode" value="">
                        <input type="hidden" id="jobcode" name="jobcode" value="">
                        <input type="hidden" id="isSale" name="isSale" value="">
                        <input type="hidden" id="jsondatas" name="jsondatas" value="">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" l="spot">姓名：</label>
                            <div class="col-sm-8">
                                <input id="name" name="name" required class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" l="spot">所属部门：</label>
                            <div class="col-sm-8">
                                <input id="txtDeptName" name="txtDeptName" disabled class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" l="spot">所属职务：</label>
                            <div class="col-sm-8">
                                <div class="treeSelect" id="form-tree" style="width: 100%;"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">是否销售：</label>
                            <div class="col-sm-8">
                                <div class="radio radio-info radio-inline">
                                    <input type="radio" id="r-fun" value="0" checked class="no-reset" name="sales">
                                    <label for="r-fun"> 否 </label>
                                </div>
                                <div class="radio radio-info radio-inline">
                                    <input type="radio" id="r-com" value="1" class="no-reset" name="sales">
                                    <label for="r-com"> 是 </label>
                                </div>
                            </div>
                        </div>
                        <div name="f-sales" class="form-group">
                            <label class="col-sm-3 control-label" l="spot">*T6用户编码：</label>
                            <div class="col-sm-8">
                                <input id="t6usercode" name="t6usercode" class="form-control" type="text">
                            </div>
                        </div>
                        <div name="f-sales" class="form-group">
                            <label class="col-sm-3 control-label" l="spot">T6单位编码：</label>
                            <div class="col-sm-8">
                                <input id="tDeptcode" name="tDeptcode" class="form-control" type="text">
                            </div>
                        </div>
                        <div name="f-sales" class="form-group">
                            <label class="col-sm-3 control-label" l="spot">客户类型：</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="customerType" name="customerType">
                                    <option value="国内">国内</option>
                                    <option value="国外">国外</option>
                                </select>
                            </div>
                        </div>
                        <div name="f-sales" class="form-group">
                            <label class="col-sm-3 control-label" l="spot">客户编码：</label>
                            <div class="col-sm-8">
                                <input id="customerCode" name="customerCode" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">联系电话：</label>
                            <div class="col-sm-8">
                                <input id="tel" name="tel" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号码：</label>
                            <div class="col-sm-8">
                                <input id="mobile" name="mobile" class="form-control" type="text">
                            </div>
                        </div>
                        <h4>账号设置</h4>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" l="spot">登录用户名：</label>
                            <div class="col-sm-8">
                                <input id="username" name="username" required class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" l="spot">登录密码：</label>
                            <div class="col-sm-8">
                                <input id="userpassword" name="userpassword" required class="form-control" type="text">
                            </div>
                        </div>
                        <h4 style="color: #9E792E" id="h-defined">自定义表单</h4>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" name="bt-close" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="opt.saveDatas(this,'users')" name="edit">保存
                </button>
            </div>
        </div>
    </div>
</div>

<%--自定义表单列表--%>
<div class="modal inmodal" data-backdrop="static" id="modal-definedList" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-body">
                <h3>自定义表单</h3>
                <table id="table-defined"></table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-defined"
                        onclick="com.clearFormItem('myForm-defined')">新增
                </button>
            </div>
        </div>
    </div>
</div>
<%--自定义表单--%>
<div class="modal inmodal" data-backdrop="static" id="modal-defined" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-body">
                <div class="row">
                    <h3>自定义表单信息</h3>
                    <form class="form-horizontal m-t" id="myForm-defined">
                        <input type="hidden" id="fid" name="fid" value="">
                        <input type="hidden" id="fcode" name="fcode" value="">
                        <input type="hidden" id="modulename" name="modulename" value="">
                        <input type="hidden" id="optionjson" name="optionjson" value="">
                        <div class="form-group">
                            <label class="col-sm-3 control-label" l="spot">表单名称：</label>
                            <div class="col-sm-8">
                                <input id="fname" name="fname" required class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" l="spot">是否必填：</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="isrequired" name="isrequired">
                                    <option value="0">否</option>
                                    <option value="1">是</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" l="spot">表单类型：</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="ftype" name="ftype">
                                    <option value="0">文本</option>
                                    <option value="1">下拉选项</option>
                                    <option value="2">日期</option>
                                    <option value="3">大文本</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group" name="div-option" id="div-option-0" style="display: none">
                            <label class="col-sm-3 control-label" l="spot" style="color: #9E792E">选项数据：</label>
                            <div class="col-sm-4">
                                <input type="text" id="optionname-0" name="optionname-0"
                                       class="form-control" placeholder="请输入选项名称">
                            </div>
                            <div class="col-sm-2">
                                <button type="button" class="btn btn-info btn-sm"
                                        onclick="com.addOptions()">新增
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" name='bt-close' data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"
                        onclick="opt.saveDatas(this,'formCustoms','myForm-defined')" name="edit">保存
                </button>
            </div>
        </div>
    </div>
</div>

<%--数据权限--%>
<div class="modal inmodal" data-backdrop="static" id="modal-auths" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-body">
                <div class="row">
                    <h3>部门数据权限</h3>
                    <ul id="treeDepts" class="ztree">
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" name="bt-close" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="opt.saveAuths(this,'userDepts')" name="edit">保存
                </button>
            </div>
        </div>
    </div>
</div>

<%--附加权限--%>
<div class="modal inmodal" data-backdrop="static" id="modal-menus" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated bounceInRight">
            <div class="modal-body">
                <div class="row">
                    <h3>菜单权限</h3>
                    <ul id="treeMenus" class="ztree">
                    </ul>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" name="bt-close" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="opt.saveAuths(this,'userMenus')" name="edit">保存
                </button>
            </div>
        </div>
    </div>
</div>
<%
    double ranNum = Math.random() * 1000;
%>
<%--树形列表--%>
<script type="text/javascript" src="../script/treeJs.js?v=<%=ranNum%>"></script>
<link rel="stylesheet" type="text/css" media="all" href="../style/ztree/css/zTreeStyle.css"/>
<link rel="stylesheet" type="text/css" media="all" href="../style/ztree/css/treeSelect.css"/>
<script src="../style/ztree/js/jquery.ztree.all.min.js"></script>
<!--treeSelect-->
<script src="../style/ztree/js/treeSelect.js?v=<%=ranNum%>"></script>
<script src="../style/hplus/js/plugins/chosen/chosen.jquery.js"></script>

<%--树形--%>
<script src="../style/hplus/js/plugins/jsTree/jstree.min.js"></script>
<link href="../style/hplus/css/plugins/jsTree/style.min.css" rel="stylesheet">

<script type="text/javascript" src="../script/tableJs.js?v=<%=ranNum%>"></script>
<%--单选按钮样式--%>
<link href="../style/hplus/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
<script type="text/javascript">
    $(function () {
        //  获取自定义表单数据
        com.queryFormCustoms('users');
        //  设置必填提示
        $("#myForm label[l='spot']").prepend("<span style='color: red'>*</span>");
        $("input[name='sales'][value='0']").attr("checked", true);
        //  默认销售为否
        $("div[name='f-sales']").hide();
        //  是否销售点击事件
        $("input[type='radio']").on('click', function () {
            var isSale = $(this).val();
            if (isSale == 0) {
                $("div[name='f-sales']").hide();
                $("#t6usercode").rules("remove", 'required');
                $("#tDeptcode").rules("remove", 'required');
                $("#customerCode").rules("remove", 'required');
            } else {
                $("div[name='f-sales']").show();
                $("#t6usercode").rules("add", 'required');
                $("#tDeptcode").rules("add", 'required');
                $("#customerCode").rules("add", 'required');
            }
        });
        //  表单验证
        $("#myForm").validate();
        //  左侧树形菜单
        tree.loadTreeJs('#div-tree', 'users');
        //  用户数据
        // table.loadData('#table-data', 'users');
        //  职务下拉选项
        tree.loadTreeSelect("#form-tree", 'userJobs');
        //  用户信息显示
        $('#modal-form').on('shown.bs.modal', function (e) {
            $("#txtDeptName").val($("#Hiddeptname").val());
            //  重新渲染职务数据
            tree.reloadTreeSelectData('userJobs');
        });
        //  渲染部门权限数据
        $('#modal-auths').on('shown.bs.modal', function (e) {
            tree.queryTreeAuto('userDepts');
        });
        //  渲染职务权限数据
        $('#modal-menus').on('shown.bs.modal', function (e) {
            tree.queryTreeAuto('userMenus');
        });
        //  显示自定义表单
        $('#modal-definedList').on('shown.bs.modal', function (e) {
            table.loadData('#table-defined', 'formCustoms');
        });
        //  自定义表单选项切换事件
        $("#ftype").change(function () {
            var dataType = $(this).val();
            if (dataType == 1) {
                $("#div-option-0").show();
            } else {
                $("#div-option-0").hide();
            }
        });
    });
</script>
</body>
</html>